<template>
  <view>
    <!-- 邮箱账号-绑定-输入框 -->
    <view class="functionArray-item">
      <text style="margin-right: 25rpx;">新邮箱账号</text>
      <input v-model="email" placeholder="请输入新邮箱账号" :maxlength="32"
        style="text-align: end;width: 70%;font-size: 13px;" />
    </view>

    <!-- 验证码 -->
    <view class="functionArray-item">
      <text style="margin-right: 25rpx;">验证码</text>
      <!-- 右侧输入框+获取验证码 -->
      <view class="display-default" style="justify-content: flex-end;">
        <input v-model="verificationCode" placeholder="请输入验证码" :maxlength="10"
          style="text-align: end;width: 40%;font-size: 13px;" />
        <!-- 获取验证码，重发  -->
        <view class="button" @click="getCode" v-show="isButton == 1 || isButton == 2">
          <text v-text="isButton == 1 ? '获取验证码' : '重发'"></text>
        </view>
        <!-- 60s重新发送 -->
        <view class="button" style="border: 1px solid #bbb;color: #bbb;" v-show="isButton == 3">
          <text>{{counter}}s重新发送</text>
        </view>
      </view>
    </view>

    <!-- 绑定邮箱按钮 -->
    <button class="button-bindingEmail" @click="bindingEmail">完成绑定</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        email: '', // 邮箱账号**
        verificationCode: '', // 验证码
        isGetCode: false, // 获取验证码节流阀
        isAcceptGetCodeTwo: false, // 后端是否已经发送验证码，发送成功之后才能开始绑定，节流
        counter: 60, // 默认60秒计时，60后可重发验证码
        timer: '', // 定时器对象
        isButton: 1, //获取验证码样式 1.获取验证码 可点 2.59s重新发送 3.重发 
        token: ''
      };
    },
    onLoad(e) {
      this.token = uni.getStorageSync('token')
    },
    methods: {
      /**
       * @deprecated 获取验证码
       */
      async getCode() {
        let email_reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        if (!email_reg.test(this.email)) {
          uni.showToast({
            title: '请输入正确的邮箱格式！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (this.isGetCode) return // 判断当前是否正在执行该请求，是就跳出方法
        this.isGetCode = true // 打开节流阀

        // 通知服务器发送邮件验证码
        this.isAcceptGetCodeTwo = true
        // 同时设置获取验证码按钮为 示例： 60s 重新发送
        this.isButton = 3
        
        this.timer = setInterval(() => {
          this.counter--
          if (this.counter <= 0) {
            clearInterval(this.timer) //清除定时器
            this.isButton = 2
            this.counter = 60
          }
        }, 1000)
        await this.$http.common.emailBinding(this.token, this.email).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          // if (res.code == 200) {
            // 邮件已发送成功
            // 可以开始绑定邮箱
           
          // }
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        this.isGetCode = false // 关闭节流阀
      },

      /**
       * @deprecated 绑定邮箱按钮
       */
      async bindingEmail() {
        let email_reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        if (!email_reg.test(this.email)) {
          uni.showToast({
            title: '请输入正确的邮箱格式！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!this.verificationCode) {
          uni.showToast({
            title: '请输入验证码！',
            icon: 'none',
            position: 'center'
          });
          return
        }

        if (!this.isAcceptGetCodeTwo) {
          uni.showToast({
            title: '验证码错误，请重新获取',
            icon: 'none',
            position: 'center'
          });
          return
        }

        uni.showLoading({
          title: '正在提交中...'
        })

        // 验证验证码是否正确
        await this.$http.user.editEmailInfo(this.token, this.email, this.verificationCode, 'N').then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          if (res.code == 200) {
            uni.showToast({
              title: '绑定成功！',
              icon: 'none',
              position: 'center'
            })

            // 设置返回消息体
            uni.setStorageSync('isEmailBinDing', true)

            // 修改成功，延迟500ms后返回
            setTimeout(() => {
              uni.navigateBack({
                delta: 2
              })
            }, 500)
          }
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })

        uni.hideLoading()
      }
    }
  }
</script>

<style lang="scss">
  .functionArray-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height: 100rpx;
    padding: 0 25rpx;

    & .button {
      border: 1px solid #155bff;
      margin-left: 25rpx;
      color: #155bff;
      padding: 10rpx 25rpx;
      border-radius: 3px;
    }
  }

  .button-bindingEmail {
    background: #000;
    color: #fff;
    margin: 30rpx;
    font-size: 16px;
  }
</style>
